<template>
  <div class="content-view">
    <Form ref="form" class="mt30 w60" :model="formModel" :rules="rules" :label-width="80">
      <FormItem label="标题" prop="title">
        <Input v-model="formModel.title" placeholder="请输入标题"></Input>
      </FormItem>
      <FormItem label="logo" prop="logoUrl">
        <UploadSingle v-model="formModel.logoUrl" ref="uploadSingle"></UploadSingle>
      </FormItem>

      <FormItem label="">
        <Button type="primary" @click="handleSubmit()">保存</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import paramSetupServer from '@/api/system_high/paramSetupServer'
export default {
  data() {
    return {
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        logoUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
      },
      formModel: {
        title: '',
        logoUrl: '',
      },
    }
  },
  computed: {
    ...mapGetters({
      sysFormModel: 'sysFormModel',
    }),
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let { title, logoUrl } = this.sysFormModel
      this.formModel = { title, logoUrl }
    },
    async handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          await paramSetupServer.setSysConfig(this.formModel)
          await this.$store.dispatch('getSysTitle')
          this.$Message.success('修改成功!')
        } else {
          this.$Message.error('请检查表单!')
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
</style>